<template>
  <div class="child-page1">
    <Header title="ChildPage3" go-back="true"></Header>
    <div class="container">
      <!--卡片-->
      <Card style="width:100%;">
        <p slot="title">
          <Icon size="20" type="ios-film-outline"></Icon>
          Film
        </p>
        <span slot="extra" @click.prevent="changeLimit">
          <Icon size="20" type="ios-megaphone-outline"></Icon>
          Change
        </span>
        <ul>
         <li v-for="(item,index) in randomMovieList" :key="index">
            <a :href="item.url" target="_blank">{{item.name}}</a>
            <span style="color: #fea941">
              <Icon type="ios-star" v-for="n in 4" :key="n"></Icon>
              <Icon type="ios-star" v-if="item.rate >= 9.5"></Icon>
              <Icon type="ios-star-half" v-else></Icon>
                    {{ item.rate }}
            </span>
          </li>
        </ul>
      </Card>
      <!--折叠面板-->
      <div class="collapse">
        <!--accordion: 手风琴模式 simple:简洁模式-->
        <Collapse v-model="value" accordion @on-change="getCollapse">
          <Panel name="1">
            史蒂夫·乔布斯
            <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
          </Panel>
          <Panel name="2">
            斯蒂夫·盖瑞·沃兹尼亚克
            <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
          </Panel>
          <Panel name="3">
            乔纳森·伊夫
            <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
          </Panel>
        </Collapse>
      </div>
      <!--选择器-->
      <div class="select">
        <!--model.sync数据的双向绑定，返回选择的数据  clearable:是否删除选项-->
        <!--label-in-value:返回选项时，是否将label和value一起返回-->
        <!--设置搜索功能：需要同时设置filterable：是否支持搜索,remote,remote-method(远程搜索的方法),loading(搜索中)四个属性-->
        <i-select :model.sync="model1" clearable
                  style="width:200px"
                  filterable remote :remote-method="searchMethod" :loading="loading" placeholder="请选择"
                  not-found-text="无选择数据"
                  label-in-value
                  @on-change="getSelectValue">
          <i-option v-for="item in selectArr" :label="item.userId" :key="item.userId" :value="item.name">{{ item.name }}</i-option>
        </i-select>
      </div>
      <!--日期选择器-->
      <div class="datapicker">
        <row>
          <i-col span="12">
            <!--confirm:开启日期底部控制栏，选择日期后点击确认后才关闭-->
            <Date-picker :open="open" :value="dataValue" confirm type="date" placeholder="请选择日期" placement="bottom-start"
                         @click.native="handleClick"
                         @on-change="handleChange"
                         @on-clear="handleClear"
                         @on-ok="handleOk">
            </Date-picker>
          </i-col>
        </row>
      </div>
      <!--时间选择器-->
      <div class="timepicker">
        <row>
          <i-col span="15">
            <!--type=time(单个时间)/timerange()-->
            <Time-picker type="timerange" format="HH点mm分ss秒" style="width: 210px"
                         @on-change="getTimePicker"></Time-picker>
          </i-col>
        </row>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
export default {
  name: 'childPage3',
  data () {
    return {
      moveList: [
        {
          name: '肖申克的救赎',
          url: 'https://movie.douban.com/subject/1292052/',
          rate: 9.6
        },
        {
          name: '这个杀手不太冷 Léon',
          url: 'https://movie.douban.com/subject/1295644/',
          rate: 9.4
        },
        {
          name: '霸王别姬',
          url: 'https://movie.douban.com/subject/1291546/',
          rate: 9.5
        },
        {
          name: '阿甘正传 Forrest Gump',
          url: 'https://movie.douban.com/subject/1292720/',
          rate: 9.4
        },
        {
          name: '美丽人生',
          url: 'https://movie.douban.com/subject/1292063/',
          rate: 9.5
        },
        {
          name: '千与千寻 千と千尋の神隠し',
          url: 'https://movie.douban.com/subject/1291561/',
          rate: 9.2
        },
        {
          name: '辛德勒的名单',
          url: 'https://movie.douban.com/subject/1295124/',
          rate: 9.4
        },
        {
          name: '海上钢琴师',
          url: 'https://movie.douban.com/subject/1292001/',
          rate: 9.2
        },
        {
          name: '机器人总动员 WALL·E',
          url: 'https://movie.douban.com/subject/2131459/',
          rate: 9.3
        },
        {
          name: '盗梦空间 Inception',
          url: 'https://movie.douban.com/subject/3541415/',
          rate: 9.2
        }
      ],
      randomMovieList: [],
      value: '1', // 折叠面板默认展示的页面
      selectArr: [
        {
          userId: '1',
          name: '王俊凯'
        },
        {
          userId: '2',
          name: '易烊千玺'
        },
        {
          userId: '3',
          name: '王源'
        },
        {
          userId: '4',
          name: '铭亮'
        },
        {
          userId: '5',
          name: '侯明昊'
        }
      ],
      searchArr: [ // 搜索的关键词
        {
          userId: '6',
          name: '李宏毅'
        },
        {
          userId: '7',
          name: '白敬亭'
        },
        {
          userId: '8',
          name: '王广允'
        }
      ],
      model1: '',
      loading: false, // 搜索时的加载
      open: false, // 日期选择显示或隐藏
      dataValue: ''
    }
  },
  created () {
  },
  methods: {
    changeLimit () {
      // 处理数组数据
      function getArrayItems (arr, num) {
        const tempArray = []
        for (let index in arr) {
          tempArray.push(arr[index]) // 存放传入的数组
        }
        const returnArray = []
        for (let i = 0; i < num; i++) {
          if (tempArray.length > 0) {
            const arrIndex = Math.floor(Math.random() * tempArray.length)
            returnArray[i] = tempArray[arrIndex]
            tempArray.splice(arrIndex, 1) // 删掉arrIndex个元素，返回一个新的数组
          } else {
            break
          }
        }
        return returnArray
      }
      this.randomMovieList = getArrayItems(this.moveList, 5)
    },
    getCollapse (e) {
      console.log(e)
      // 切换面板时，返回当前切换面板的key
    },
    getSelectValue (e) {
      console.log(e)
    },
    searchMethod (query) { // 搜索功能
      // console.log(query)
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          // this.selectArr = [] // 进行搜素的时候，把select的默认数据清空，存放搜索出来的数据
          for (var i = 0; i < this.searchArr.length; i++) {
            if (this.searchArr[i].name.includes(query)) {
              this.selectArr.push(this.searchArr[i])
            }
          }
        }, 1500)
      }
    },
    handleClick () { // 打开日期选择
      this.open = !this.open
    },
    handleChange (data) { // 获取选择日期的值
      this.dataValue = data
    },
    handleClear () {
      this.open = false
    },
    handleOk () {
      this.open = false
    },
    // 时间选择
    getTimePicker (time) {
      console.log(time)
    }
  },
  mounted () {
    this.changeLimit()
  },
  components: {
    Header
  }
}
</script>

<style lang="scss" scoped>
.child-page1{
  width: 100%;
  padding-top: 50px;
  .container{
    width: 100%;
    .collapse{
      padding-top: 10px;
    }
    .select{
      width: 100%;
      padding-top: 20px;
    }
    .datapicker{
      width: 100%;
      padding-top: 20px;
    }
    .timepicker{
      width: 100%;
      padding-top: 20px;
    }
  }
}
</style>
